<template>
  <div class="article-list" ref="articleList">
    <van-pull-refresh
      v-model="isPullDownLoading"
      @refresh="onRefreshPullDownLoding"
      :success-text="refreshSuccessText"
      :success-duration="1500"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleItem
          v-for="(articles, index) in article"
          :key="index"
          :article="articles"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticle } from "../api/article.js";
import ArticleItem from "../components/article-item.vue";
import {debounce} from 'lodash'
export default {
  name: "article-list",
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  components: {
    ArticleItem
  },
  mounted() {
    // 因为要回到列表时要回到原来的位置
    // 节流函数debounce
    const articleList = this.$refs["articleList"];
    articleList.onscroll = debounce(() => {
      this.scrollTop = articleList.scrollTop
    },50);
  },
  activated(){
    // 把记录的到顶部的距离重新设置回去
    this.$refs['articleList'].scrollTop = this.scrollTop
  },
  data() {
    return {
      article: [],
      loading: false, // 加载的状态要不要执行下一次
      finished: false, //加载的状态的结束和开始
      timestamp: null, //获取下一页数据的时间戳
      isPullDownLoading: false,
      refreshSuccessText: "", //下拉刷新的提示
      scrollTop: 0 //列表滚动到顶部的距离
    };
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data: res } = await getArticle({
        channel_id: this.channel.id,
        //   时间戳 类似于页码，请求下一页数据使用上一次返回的时间戳
        timestamp: this.timestamp || Date.now(),
        with_top: 1 //要不要传置顶文章
      });
      console.log(res.data);
      const { results } = res.data;
      //   放到数组中
      this.article.push(...results);
      //   继续加载要不要执行下一页
      this.loading = false;
      //   第四步数据全部加载完成
      if (results.length) {
        // 更新下一页数据页码
        this.timestamp = res.data.pre_timestamp;
      } else {
        // 加载完成  true 停止下载
        this.finished = true;
      }
    },
    async onRefreshPullDownLoding() {
      //   下拉刷新组件自己展示loading状态
      const { data: res } = await getArticle({
        channel_id: this.channel.id,
        //   时间戳 类似于页码，请求下一页数据使用上一次返回的时间戳
        timestamp: Date.now(), //为了方便学习，每次传回的数据也不一样
        with_top: 1 //要不要传置顶文章
      });
      // 请求数据
      const { results } = res.data;
      this.article.unshift(...results);
      // 把数据放到列表中
      // 关闭刷新的状态 loading
      this.isPullDownLoading = false;
      //   提示你更新数据
      this.refreshSuccessText = `更新了${results.length}条数据`;
    }
  }
};
</script>
<style scoped lang="less">
.article-list {
  // 滚动区域设置
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 90px;
  overflow-y: auto;
}
</style>
